<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        组件接受到 prop 不允许修改,但是可以找到数据提供方,让它去修改


        触发自定义事件  原生 click input blur
        this.$emit(eventName, payload)
            eventName - 自定义事件的名称: 比如 myClick
            payload   - 携带的一些参数

        配置着 v-on 在 组件标签上 绑定这个自定义事件

        自定义事件的 $event 这个变量的值,不是事件对象,而是触发这个事件时,传递的 payload

     -->
    <div id="app">
      <button @click="count++">{{ count }}</button>

      <person :my-name="mySonName" :my-age="mySonAge" @my-click="fn1"></person>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.config.productionTip = false;

      Vue.component("person", {
        props: ["myName", "myAge"],

        computed: {
          hello() {
            return `大家好，我是${this.myName}，年龄是${this.myAge}`;
          },
        },

        methods: {
          callFather() {
            console.log("callFather");
            // 通知父亲

            this.$emit("my-click", "李威风");
          },
        },

        template: `
            <div>
              <button @click="callFather">跟父亲,打个招呼</button>
              <h2>姓名：{{ myName }}</h2>
              <h2>年龄：{{ myAge }}</h2>
              <p v-text="hello"></p>
            </div>
        `,
      });

      new Vue({
        el: "#app",

        data: function () {
          return {
            count: 1,

            mySonName: "张三",
            mySonAge: 18,
          };
        },

        methods: {
          fn1(event) {
            console.log("收到 儿子的 来电了,", event);

            this.mySonName = event;
          },
        },
      });
    </script>
  </body>
</html>
